<script>
import { ORDER_TYPE, ORDER_STATUS, ORDER_PLATFORM } from '@/enum/order'
export default {
  name: 'OrderItemSteps',
  props: {
    details: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // -1: 已取消, 0: 待付款, 10: 待发货, 20: 已发货, 30: 待评价 31: 已完成(确认收货) finishFlag: true, 31: 已评价 finishFlag: false
      statusText: {
        '-1': '订单已取消',
        0: '买家已付款，请及时进行发货。',
        1: '订单已取消',
        2: '买家已付款，请及时进行发货。',
        20: '订单已发货，请提醒客户查收',
        30: '用户已确认收货，等待用户评价',
        10: '买家已付款，请及时进行发货'
      }
    }
  },
  computed: {
    // 订单类型
    orderSource() {
      return data => {
        return ORDER_TYPE.find(item => item.value === data)?.label
      }
    },
    currentActive() {
      return this.details?.stepTimeList?.filter(item => item.time)?.length
    },
    // 下单平台
    orderPlatform() {
      return ORDER_PLATFORM.find(item => item.value === this.details?.platform)?.label
    },
    // 是否显示红色
    statusTextColor() {
      return [10].some(ele => ele === this.details?.orderStatus)
    },
    // 订单状态
    orderStatusText() {
      if (this.details?.orderStatus === 31 && this.details?.finishFlag) {
        return '已完成'
      } else if (this.details?.orderStatus === 31 && !this.details?.finishFlag) {
        return '已评价'
      } else {
        return ORDER_STATUS[this.details?.orderStatus]
      }
    },
    orderStatusTip() {
      if (this.details?.orderStatus === 31 && this.details?.finishFlag) {
        return '订单已评价，进入完结状态'
      } else if (this.details?.orderStatus === 31 && !this.details?.finishFlag) {
        return '用户已评价，等待订单完成'
      } else {
        return this.statusText[this.details?.orderStatus]
      }
    }
  },
  methods: {
    // 生成发货状态
    setUpStatusText(status) {
      return (
        <div class="flex items-center">
          <h3 style={this.statusTextColor ? 'color: #fc4541' : ''}>{this.orderStatusText}</h3>
          {status === 30 ? <span>【自动收货/主动收货】</span> : ''}
          {status === 31 && !this.details?.finishFlag ? <span>（主动评价/自动评价）</span> : ''}
        </div>
      )
    },
    // 生成状态信息
    setUpStatusInfo() {
      return (
        <div>
          {this.setUpStatusText(this.details?.orderStatus)}
          <p class="mt-10 ft-12">{this.orderStatusTip}</p>
          <p class="mt-10 ft-12">
            <span>订单总额：</span>
            <span class="mt-10 ft-16" style={'color: #fc4541'}>
              {this.details?.realityAmount}
            </span>
            <span class="ml-10">积分</span>
          </p>
          <p class="mt-10 ft-12">
            <span>订单备注：</span>
            <span>{this.details?.userRemark ? this.details?.userRemark : '暂无'}</span>
          </p>
        </div>
      )
    },
    // 生成步骤条
    setUpSteps() {
      return (
        <div>
          <el-steps active={this.currentActive} finish-status="success" align-center>
            {this.details?.stepTimeList.map((ele, index) => {
              return <el-step title={ele.step} key={index} description={`${ele.time || ''}`} />
            })}
          </el-steps>
        </div>
      )
    }
  },
  render() {
    return (
      <div>
        <el-row class="ft-14" type="flex" justify="space-between">
          <el-col span={6}>订单编号：{this.details && this.details.orderNo}</el-col>
          <el-col span={6} align="center">
            下单时间：{this.details && this.details.createdTime}
          </el-col>
          {this.details?.orderStatus == -1 ? (
            ''
          ) : (
            <el-col span={6} align="center">
              支付流水号：{this.details && this.details.payCode}
            </el-col>
          )}
          <el-col span={6} style={'color: #293c66'} align="right">
            下单平台： {this.orderPlatform}
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-col span={6}>{this.setUpStatusInfo()}</el-col>
          <el-col span={18}>{this.setUpSteps()}</el-col>
        </el-row>
      </div>
    )
  }
}
</script>

<style lang="scss" scoped>
.order-steps-panel {
  .steps-panel-top {
    .time {
      padding: 0 15px;
    }
  }
}

.reason-text {
  margin-top: 10px;
  font-size: 12px;
}
.success-text {
  padding-bottom: 15px;
}
.status-title {
  display: inline-block;
}
.red-color {
  color: $hw-text-color-red;
}
</style>
